<script setup lang="ts">
defineOptions({
  name: 'ColorPicker'
})

const color = ref<string>('#1e90ff')
const predefineColors = ref<string[]>([
  '#1e90ff',
  '#4e6ef2',
  '#0052d9',
  '#3fb884',
  '#16baa9',
  '#07c160',
  '#009688',
  '#6954f0',
  '#7b40f2',
  '#f01414'
])

const colorChange = (color: any) => {
  document.documentElement.style.setProperty('--el-color-primary', color)
}
</script>

<template>
  <el-color-picker v-model="color" :predefine="predefineColors" @change="colorChange" />
</template>

<style scoped></style>
